<template>
  <view class="user">
    <view class="box1">
      <view class="back">
        <u-icon name="arrow-left"></u-icon>
      </view>
      <view class="box1-bottom">
        <view class="box1-content">
          <view class="left" @click="biangeng">
            <image :src="url" mode=""></image>
          </view>
          <view class="center">
            <view class="center-top">
              则安
            </view>
            <view class="center-bottom">
              普通用户
            </view>
          </view>
          <view class="right">
            <image src="/static/消息-置灰.png" mode=""></image>
          </view>
        </view>
      </view>
    </view>
    <view class="box2">
      <view class="box2-content">
        <view class="box2-left">
          会员中心
        </view>
        <view class="box2-center">
          | 首次开会员，领取66元专享红包！
        </view>
        <view class="box2-right">
          立即开通
        </view>
      </view>
    </view>
    <view class="box3">
      <view class="box3-90">
        <view class="box3-content">
          <view class="box3-top">
            <span>￥</span>0
          </view>
          <view class="box3-bottom">
            余额
          </view>
        </view>
        <view class="box3-content">
          <view class="box3-top">
            3
          </view>
          <view class="box3-bottom">
            优惠卷
          </view>
        </view>
        <view class="box3-content">
          <view class="box3-top">
            0
          </view>
          <view class="box3-bottom">
            金额
          </view>
        </view>
        <view class="box3-content">
          <view class="box3-top">
            <span>￥</span>4
          </view>
          <view class="box3-bottom">
            收益
          </view>
        </view>
      </view>
    </view>
    <view class="box4">
      <view class="box4-top">
        <view class="top-left">
          我的订单
        </view>
        <view class="top-bottom">
          全部订单 &gt;
        </view>
      </view>
      <view class="box4-bottom">
        <view class="box4-content">
          <view class="img">
            <image src="/static/待支付￥.png" mode=""></image>
          </view>
          <view class="img-font">
            待支付
          </view>
        </view>
        <view class="box4-content">
          <view class="img">
            <image src="/static/等待配送.png" mode=""></image>
          </view>
          <view class="img-font">
            待配送
          </view>
        </view>
        <view class="box4-content">
          <view class="img">
            <image src="/static/配送中.png" mode=""></image>
          </view>
          <view class="img-font">
            配送中
          </view>
        </view>
        <view class="box4-content">
          <view class="img">
            <image src="/static/viiva电子存折.png" mode=""></image>
          </view>
          <view class="img-font">
            待评价
          </view>
        </view>
        <view class="box4-content">
          <view class="img">
            <image src="/static/售后.png" mode=""></image>
          </view>
          <view class="img-font">
            售后
          </view>
        </view>
      </view>
    </view>
    <view class="box5">
      <view class="box5-top">
        我的服务
      </view>
      <view class="box5-bottom">
        <view class="box5-content">
          <view class="img">
            <image src="/static/积分商城.png" mode=""></image>
          </view>
          <view class="img-font">
            积分商城
          </view>
        </view>
        <view class="box5-content">
          <view class="img">
            <image src="/static/收藏.png" mode=""></image>
          </view>
          <view class="img-font">
            商品收藏
          </view>
        </view>
        <view class="box5-content">
          <view class="img">
            <image src="/static/cnb-benefit.png" mode=""></image>
          </view>
          <view class="img-font">
            推荐有礼
          </view>
        </view>
        <view class="box5-content">
          <view class="img">
            <image src="/static/标签.png" mode=""></image>
          </view>
          <view class="img-font">
            助力免费拿
          </view>
        </view>
      </view>
    </view>
    <view class="box6">
      <view class="box6-top">
        安全中心
      </view>
      <view class="box6-bottom">
        <view class="box6-content">
          <view class="left">
            <image src="/static/客服.png" mode=""></image>
            <p>客服与帮助</p>
          </view>
          <view class="right">
            &gt;
          </view>
        </view>
        <view class="box6-content">
          <view class="left">
            <image src="/static/dizhi1.png" mode=""></image>
            <p>收货地址</p>
          </view>
          <view class="right">
            &gt;
          </view>
        </view>
        <view class="box6-content">
          <view class="left">
            <image src="/static/设置.png" mode=""></image>
            <p>设置</p>
          </view>
          <view class="right">
            &gt;
          </view>
        </view>
      </view>
    </view>
    <view class="box7"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        url: '/static/1.png'
      }
    },
    methods: {
      biangeng() {
        let t = this;
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: function(res) {
            console.log(JSON.stringify(res.tempFilePaths));
            t.url = res.tempFilePaths[0]
            console.log(t.url);
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .user {
    background-color: #f5f5f5;

    .box1 {
      background: linear-gradient(to bottom, #caf0db, #fff);

      .back {
        padding-top: 60rpx;
        width: 90%;
        margin: auto;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .box1-bottom {
        width: 90%;
        height: 200rpx;
        margin: auto;
        margin-top: 60rpx;
        position: relative;
        background-color: #fbfbfb;

        .box1-content {
          width: 90%;
          margin: auto;

          margin-top: 40rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: absolute;
          top: 10rpx;
          left: 30rpx;
        }

        .left {
          border: 1px solid #a1d8b8;
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .center {

          margin-left: -20rpx;

          // width: 100%;
          .center-top {
            font-weight: bold;
            font-size: 40rpx;
          }

          .center-bottom {
            background-color: #3eb874;
            width: 150rpx;
            text-align: center;
            color: #fff;
            margin-top: 10rpx;
            height: 60rpx;
            line-height: 60rpx;
            border-radius: 10px;
          }
        }

        .right {

          // margin-left: 130rpx;
          image {
            width: 50rpx;
            height: 50rpx;
          }
        }
      }
    }

    .box2 {
      width: 90%;
      margin: auto;
      border-radius: 10px;
      background-color: #3eb874;
      background: linear-gradient(to right, #3eb874, #7feeb0);

      .box2-content {
        width: 90%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        color: #fff;

        .box2-left {
          font-weight: bold;
        }

        .box2-center {
          font-size: 22rpx;
        }

        .box2-right {
          width: 140rpx;
          height: 50rpx;
          line-height: 50rpx;
          text-align: center;
          border-radius: 10px;
          font-size: 24rpx;
          background-color: #fff;
          color: #65c08e;
        }
      }
    }

    .box3 {
      background-color: #fff;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      width: 90%;
      margin: auto;
      // height: 200rpx;
      padding: 20rpx;

      .box3-90 {
        width: 90%;
        margin: auto;
        display: flex;
        text-align: center;
        justify-content: space-between;
        font-weight: bold;

        .box3-content {
          .box3-top {
            color: #36ae6b;

            span {
              font-size: 16rpx;
            }
          }
        }
      }
    }

    .box4 {
      width: 90%;
      height: 200rpx;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      margin-top: 20rpx;

      .box4-top {
        display: flex;
        justify-content: space-between;
        padding: 20rpx;

        .top-left {
          font-weight: bold;
        }

        .top-bottom {
          color: #5f5f5f;
        }
      }

      .box4-bottom {
        display: flex;
        width: 90%;
        margin: auto;
        align-items: center;
        justify-content: space-between;
        font-weight: bold;

        .box4-content {
          // border: 1px solid red;
          // margin: auto;
          text-align: center;

          .img {
            image {
              width: 50rpx;
              height: 50rpx;
            }
          }
        }
      }
    }

    .box5 {
      width: 90%;
      height: 200rpx;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      margin-top: 20rpx;

      .box5-top {
        font-weight: bold;
        padding: 20rpx;
      }

      .box5-bottom {
        display: flex;
        width: 90%;
        margin: auto;
        align-items: center;
        justify-content: space-between;
        font-weight: bold;

        .box5-content {
          // border: 1px solid red;
          // margin: auto;
          text-align: center;

          .img {
            image {
              width: 50rpx;
              height: 50rpx;
            }
          }
        }
      }
    }

    .box6 {
      width: 90%;
      height: 350rpx;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      margin-top: 20rpx;

      .box6-top {
        font-weight: bold;
        padding: 20rpx;
      }

      .box6-bottom {
        width: 90%;
        margin: auto;

        .box6-content {
          display: flex;
          justify-content: space-between;
          height: 60rpx;
          margin-top: 20rpx;

          // line-height: 100rpx;
          .left {
            display: flex;

            image {
              width: 50rpx;
              height: 50rpx;
            }

            p {
              margin-left: 30rpx;
              font-weight: bold;
            }
          }

          .right {
            color: #c0c0c0;
          }
        }
      }
    }

    .box7 {
      margin-top: 20rpx;
      height: 20rpx;
    }
  }
</style>